<template>
  <Teleport to="body">
    <Transition name="fade">
      <div v-if="visible" class="green-dialog-overlay" @click.self="handleCancel">
        <div class="green-dialog-container">
          <div class="green-dialog-header">
            <div class="dialog-icon" :class="type">
              <svg
                v-if="type === 'warning'"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                <path
                  d="M12 8V12M12 16H12.01"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <svg
                v-else-if="type === 'info'"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                <path
                  d="M12 16V12M12 8H12.01"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <svg
                v-else
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
                <path
                  d="M8 12L11 15L16 9"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </div>
            <h3 class="dialog-title">{{ title }}</h3>
            <button class="close-btn" @click="handleCancel" aria-label="关闭">
              <svg
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M18 6L6 18M6 6L18 18"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
            </button>
          </div>

          <div class="green-dialog-content">
            <p class="dialog-message">{{ message }}</p>
          </div>

          <div class="green-dialog-footer">
            <button class="green-btn" :class="type" @click="handleConfirm">
              {{ confirmText }}
            </button>
            <button class="green-btn outline" @click="handleCancel">
              {{ cancelText }}
            </button>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const title = ref('提示')
const message = ref('')
const confirmText = ref('确定')
const cancelText = ref('取消')
const type = ref('success')

let resolvePromise = null
let rejectPromise = null

const show = (options = {}) => {
  title.value = options.title || '提示'
  message.value = options.message || ''
  confirmText.value = options.confirmText || '确定'
  cancelText.value = options.cancelText || '取消'
  type.value = options.type || 'success'
  visible.value = true

  return new Promise((resolve, reject) => {
    resolvePromise = resolve
    rejectPromise = reject
  })
}

const handleConfirm = () => {
  visible.value = false
  if (resolvePromise) {
    resolvePromise(true)
  }
}

const handleCancel = () => {
  visible.value = false
  if (rejectPromise) {
    rejectPromise(false)
  }
}

// 暴露方法给父组件使用
defineExpose({
  show,
  close: handleCancel,
})
</script>

<style scoped>
.green-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.green-dialog-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  border: 2px solid var(--success-color);
}

.green-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--success-color), #28a745);
  color: white;
}

.green-dialog-header.warning {
  background: linear-gradient(135deg, #ff9800, #f57c00);
  border-color: #ff9800;
}

.green-dialog-header.info {
  background: linear-gradient(135deg, #2196f3, #1976d2);
  border-color: #2196f3;
}

.dialog-icon {
  color: white;
  margin-right: 12px;
  display: flex;
  align-items: center;
}

.dialog-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  flex: 1;
  color: white;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.green-dialog-content {
  padding: 24px;
}

.dialog-message {
  margin: 0;
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
}

.green-dialog-footer {
  display: flex;
  gap: 12px;
  padding: 0 24px 24px;
  justify-content: flex-end;
}

.green-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--success-color);
  color: white;
}

.green-btn:hover {
  background-color: #28a745;
  transform: translateY(-1px);
}

.green-btn.warning {
  background-color: #ff9800;
}

.green-btn.warning:hover {
  background-color: #f57c00;
}

.green-btn.info {
  background-color: #2196f3;
}

.green-btn.info:hover {
  background-color: #1976d2;
}

.green-btn.outline {
  background-color: transparent;
  color: var(--success-color);
  border: 1px solid var(--success-color);
}

.green-btn.outline:hover {
  background-color: var(--success-color);
  color: white;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active .green-dialog-container,
.fade-leave-active .green-dialog-container {
  transition: transform 0.3s ease;
}

.fade-enter-from .green-dialog-container,
.fade-leave-to .green-dialog-container {
  transform: scale(0.9);
}
</style>
